<template>
  <box1>
    <div class="__content">
      <img v-if="currentImg" :src="currentImg[currentIndex]" />
    </div>

  </box1>
</template>

<script setup lang="ts">
import box1 from '../../../compNew/box1.vue';
import * as API from '@/api/dataBoard';
import * as FileApi from '@/api/download';
import { onMounted, ref, onUnmounted } from 'vue';
import * as formatLocalData from '../formatLocalData';

const currentImg = ref<any>([]);
const currentIndex = ref(0);
let timmer: any = null;
const rate = ref(2000);
async function reloadIMG(senceId) {
  const ret = await FileApi.fileDownload({ id: senceId, isOnline: true })
  const blob = new Blob([ret])
  const reader = new window.FileReader();
  reader.readAsDataURL(blob)
  reader.onloadend = function () {
    currentImg.value = [...currentImg.value, reader.result];
  }
}
const getRate = async () => {
  const rates = await formatLocalData.getRate();
  rate.value = rates['img'];
}
const getImg = async () => {
  const res = await API.getHomeImg({
    code: 'page-logo',
  });
  if (res) {
    reloadIMG(res.file.id)
  }
}
const getAllHomeImg = async () => {
  const res = await API.getAllHomeImg();
  if (res) {
    run();
    res.forEach((item) => {
      reloadIMG(item.id)
    })
  }
}
const run = () => {
  clearInterval(timmer);
  timmer = setInterval(() => {
    if (currentIndex.value < currentImg.value.length - 1) {
      currentIndex.value = currentIndex.value + 1;
    } else {
      currentIndex.value = 0;
    }
  }, rate.value);
}
onMounted(() => {
  getRate();
  getAllHomeImg();
});
onUnmounted(() => {
  clearInterval(timmer);
})
</script>

<style lang="scss" scoped>
.__content {
  height: 100%;
  // background-image: url('./homeimg.png');
  // background-size: 94% 94%;
  // background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 92%;
    height: 92%;
  }
}
</style>
